<template>
  <div class="home">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <z-carousel :banners="banners" :height="3.2"></z-carousel>
        <z-notice :notices="notices"></z-notice>
        <div class="boundary"></div>
        <div class="operationMenu">
          <div class="mui-row row-1">
            <div class="mui-col-xs-4 row-1-left"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/dingwei.jpg"/></div>
            <div class="mui-col-xs-4 row-1-middle">
              <div class="mui-row" v-tap="{method:paymentByScan}"><div class="mui-col-xs-12"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/saoma.jpg"/></div></div>
              <div class="mui-row"><div class="mui-col-xs-12 kefu"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/kefu.jpg"></div></div>
            </div>
            <div class="mui-col-xs-4 row-1-right"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/xinshouzhinan.jpg"/></div>
          </div>
          <div class="mui-row">
            <div class="mui-col-xs-6 row-2-left"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/shangcheng.jpg"/></div>
            <div class="mui-col-xs-6 row-2-right"><img src="https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/hahanongjiang/yixiaoguoji/operationMenu/jiaoyi.jpg"/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ZNotice from '@/components/z-notice'
  import ZCarousel from '@/components/z-carousel'
  export default {
    name: "home",
    data(){
      return {
        banners: [
          //{id:0,media_type:1,image_url:'http://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/20180920/0935198605145c.jpg'},
          //{id:1,media_type:1,image_url:'http://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/20180920/09382484536b3c.jpg'},
          //{id:2,media_type:1,image_url:'http://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/20180920/093928639dc07f.jpg'},
        ],
        notices:[
          {id:1,value:"易销国际，扶贫利民益大家！"},
          {id:2,value:"易销国际，扶贫利民益大家！2"},
          {id:3,value:"易销国际，扶贫利民益大家3易销国际，扶贫利民益大家！易销国际，扶贫利民益大家！"},
          {id:4,value:"易销国际，扶贫利民益大家4易销国际，扶贫利民益大家！"},
          {id:5,value:"易销国际，扶贫利民益大家！5"},
        ],
        clientHeight:'',
        isApp:false,
      }
    },
    components:{
      ZNotice,
      ZCarousel
    },
    created(){
      var that = this;
      that.getIndexData();
      mui.plusReady(function() {
        that.isApp=true;
      });
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    },
    methods:{
      //页面初始化数据
      getIndexData(){
        var that = this;
        that.$http({url: that.$http.adornUrl(that.$api.IndexUrlBanner),method:'get',params:that.$http.adornParams()}).then(function(res){
          if(res.errno == 0){
            that.banners = res.data.banner;
          }
        }).catch(function (err) {
          console.log("错误提示:",err);
        })
      },
      paymentByScan(){
        var that = this;
        if(that.isApp){
          that.$router.push('/scan');
        }else{
          mui.toast("请在app中使用此功能")
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .home {
    .mui-scroll-wrapper{
      padding-bottom: 50px;
      background-color: #fff;
    }
    .boundary{
      border-bottom:1px solid rgb(230,230,230);
    }
    .operationMenu{
      margin:0.3rem;
      img{
        width:100%;
        height: auto;
        border-radius:0.1rem;
        -moz-box-shadow: 0.05rem 0.05rem 0.08rem rgba(102,102,102,0.6);
        -webkit-box-shadow: 0.05rem 0.05rem 0.08rem rgba(102,102,102,0.6);
        box-shadow: 0.05rem 0.05rem 0.08rem rgba(102,102,102,0.6);
      }
      .row-1{
        margin-bottom: 0.08rem;
        .row-1-left{
          padding-right:0.12rem;
        }
        .row-1-middle{
          padding:0 0.06rem;
          .kefu{
            margin-top: 0.08rem;
          }
        }
        .row-1-right{
          padding-left:0.12rem;
        }
      }
      .row-2-left{
        padding-right:0.09rem;
      }
      .row-2-right{
        padding-left:0.09rem;
      }
    }
  }
</style>
